<template>
  <!-- 退租流程第三步 -->
  <div class="thirdStepPage">
    <CommonTitle :titleName="'租赁合同信息'">
      <template #rightCnBox>
        <div class="titleRight">
          租赁合同经办人: {{ baseForm.leaseManageUserName }} (
          {{ baseForm.leaseDepartmentName }} )
        </div>
      </template>
    </CommonTitle>
    <div class="inpuBox">
      <el-form
        :inline="true"
        :model="baseForm"
        class="demo-form-inline"
        label-position="right"
        label-width="130px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item style="width: 100%" label="项目名称:">
              <span class="itemContentBox">{{ baseForm.projectName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item style="width: 100%" label="资产名称:">
              <span class="itemContentBox">{{ baseForm.assetsName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width: 100%" label="资产地址:">
              <span class="itemContentBox">{{ baseForm.address }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item style="width: 100%" label="合同名称:">
              <span class="itemContentBox">{{ baseForm.contractName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width: 100%" label="合同编号:">
              <span class="itemContentBox">{{ baseForm.contractId }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item style="width: 100%" label="承租方(签约方):">
              <span class="itemContentBox">{{ baseForm.assetsName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width: 100%" label="租赁周期:">
              <span class="itemContentBox"
                >{{ baseForm.signStartTime }} 至
                {{ baseForm.signEndTime }}</span
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item style="width: 100%" label="承租面积:">
              <span class="itemContentBox">{{ baseForm.leaseTotalArea }}</span>
            </el-form-item>
          </el-col>
          <!-- =====================处理============================ -->
          <el-col :span="12">
            <el-form-item style="width: 100%" label="房源明细:">
              <span class="itemContentBox">{{ baseForm.assetsName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item style="width: 100%" label="租赁用途:">
              <span class="itemContentBox">{{ baseForm.purpose }}</span>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="保证金:">
              <span class="itemContentBox">{{ baseForm.deposit }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="合同金额:">
              <span class="itemContentBox">{{
                baseForm.contractTotalPrice
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="已收总金额:">
              <span class="itemContentBox">{{
                baseForm.receivedTotalPrice
              }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item style="width: 100%" label="审批信息:">
              <el-button
                type="primary"
                color="#fc702b"
                style="color: #fff"
                @click="openHandler(baseForm?.routeUrl)"
                >查看审批流程</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <CommonTitle :titleName="'退租信息'">
      <template #rightCnBox>
        <div class="titleRight">
          退租经办人: {{ baseForm.rentOutManageUserName }} (
          {{ baseForm.rentOutDepartmentName }} )
        </div>
      </template>
    </CommonTitle>
    <el-table
      class="rentPlanTabel"
      :data="baseForm.leaseRentPlans"
      :header-row-style="{ background: '#F5F5F5' }"
      :header-cell-style="{
        background: 'none',
        padding: '12px 0'
      }"
      tooltip-effect="dark"
      border
      style="width: 100%; margin-bottom: 23px"
    >
      <el-table-column prop="numberOfPeriods" label="期数" align="center">
      </el-table-column>
      <el-table-column label="期间" width="200" align="center">
        <template #default="scope">
          {{ scope.row.payStartTime }} - {{ scope.row.payEndTime }}
        </template>
      </el-table-column>
      <el-table-column
        prop="numberOfPeriods"
        label="租赁面积"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="increaseRatio"
        label="递增"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="rentUnitPrice"
        label="租金单价"
        align="center"
      ></el-table-column>
      <el-table-column
        :prop="baseForm.payType == '1' ? 'receivableRent' : ''"
        label="月租金"
        align="center"
      ></el-table-column>
      <el-table-column
        :prop="baseForm.payType == '2' ? 'receivableRent' : ''"
        label="季租金"
        align="center"
      ></el-table-column>
      <el-table-column
        :prop="baseForm.payType == '3' ? 'receivableRent' : ''"
        label="半年租金"
        align="center"
      ></el-table-column>
      <el-table-column
        :prop="baseForm.payType == '4' ? 'receivableRent' : ''"
        label="年租金"
        align="center"
      ></el-table-column>
      <el-table-column prop="payStatus" label="付款状态" align="center">
        <template #default="scope">
          {{ scope.row.payStatus > 0 ? '已缴纳' : '未缴纳' }}
        </template>
      </el-table-column>
    </el-table>

    <el-form
      :inline="true"
      :model="baseForm"
      class="demo-form-inline"
      label-position="right"
      label-width="130px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="应退金额:">
            <span class="itemContentBox">{{ baseForm.refundableAmount }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="承租方收款账号:">
            <span class="itemContentBox">{{ baseForm.bankAccountNumber }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="开户行:">
            <span class="itemContentBox">{{ baseForm.bankName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="户名:">
            <span class="itemContentBox">{{ baseForm.bankAccountName }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import {
  ElForm,
  ElFormItem,
  ElTable,
  ElTableColumn,
  ElRow,
  ElCol,
  ElDatePicker,
  ElMessage
} from 'element-plus'
import CommonTitle from '@/components/CommonTitle.vue'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { thorwLeaseApi } from '@/api/coordination'

const router = useRouter()
const rentOutId = router.currentRoute.value.params.rentOutId

const info = ref({})
const baseForm = reactive({
  projectName: '--',
  routeUrl: '',
  contractName: '--',
  contractId: '--',
  purpose: '--',
  signStartTime: '--',
  signEndTime: '--',
  assetsName: '--',
  leaseTotalArea: '--',
  address: '--',
  leaseHousings: [], // 房源明细
  leaseManageUserName: '--', // 租赁合同经办人
  leaseDepartmentName: '--', // 租赁部门
  leaseCustomers: [], // 租赁客户集合
  deposit: '--', // 保证金
  contractTotalPrice: '--',
  receivedTotalPrice: '--',
  leaseRentPlans: [], // 退租信息
  refundableAmount: '--', // 应退金额
  bankVo: {
    bankAccountNumber: '--', // 收款账号
    bankName: '--', // 开户行
    bankAccountName: '--' // 户名
  },
  rentOutManageUserName: '--', // 退租经办人
  rentOutDepartmentName: '--', // 退租部门
  payType: '' // 支付方式： 1-月；2-季；3-半年；4-年
})
const openHandler=(url='')=>{
  // console.log(url);
  window.open(url)
}
// 退租会审单信息
const getRentingOutInfo = () => {
  thorwLeaseApi.getRentingOutInfo(rentOutId).then((res) => {
    const { code, data, msg } = res
    if (code == 200) {
      if (data) {
        Object.keys(baseForm).forEach((n) => {
          if (data[n]) {
            baseForm[n] = data[n]
          }
        })
      }
    }
  })
}

onMounted(() => {
  getRentingOutInfo()
})
</script>

<style lang="scss" scoped>
.thirdStepPage {
  .inpuBox {
    padding: 32px 76px 15px;
    border-radius: 10px;
    border: 1px solid #e3e7f1;
    margin-bottom: 38px;
    .demo-form-inline {
      .docBox {
        .downLoadBtn {
          width: 77px;
          height: 32px;
          line-height: 30px;
          display: inline-block;
          background: linear-gradient(180deg, #ffd091 0%, #ffa557 100%);
          border-radius: 4px;
          text-align: center;
          font-weight: 500;
          color: #ffffff;
          font-family: SourceHanSansMedium;
          cursor: pointer;
        }
      }
    }
  }
  .titleRight {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  .btnBox {
    text-align: center;
  }
  .rentPlanTabel {
    .el-table__header-wrapper {
      .el-table__header {
        .el-table__cell {
          .cell {
            color: #333;
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>
